<template>
  <div class="video-related">
    <van-loading v-if="!hasVideos" class="loading" :color="rootThemeColor" type="spinner">加载中...</van-loading>
    <van-row v-if="hasVideos" type="flex" class="list">
      <van-col span="12"
        v-for="item in videos"
        :key="item.avid"
      >
        <video-item
          :aid="item.aid"
          :bvid="item.bvid"
          :title="item.title"
          :coverPath="item.pic"
          :view="item.stat.view"
          :danmaku="item.stat.danmaku"
          :duration="item.duration"
          :allParams="item"
        >
        </video-item>
      </van-col>
    </van-row>
  </div>
</template>

<script>
import { Loading as VanLoading, Row as VanRow, Col as VanCol } from 'vant'
import VideoItem from '@/components/video-item/VideoItem.vue'
export default {
  name: 'VideoRelated',
  components: {
    VanLoading,
    VanRow,
    VanCol,
    VideoItem
  },
  inject: ['rootThemeColor'],
  props: {
    videos: {
      type: Array
    }
  },
  computed: {
    hasVideos () {
      return this.videos.length > 0
    }
  }
}
</script>

<style lang="scss" scoped>
  .loading{
    display: flex;
    justify-content: center;
  }
  .video-related{
    padding: {
      left: rem(5px);
      right: rem(5px);
    };
  }
  .list{
    flex-wrap: wrap;
  }
</style>
